<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue条件判断</title>
    <script src="../hanshunping/js/vue.js"></script>
</head>
<body>

<!--
条件性的渲染某元素，判定为true时渲染，否则不渲染
1. v-if = "表达式"
2. v-else = "表达式"
3. v-else-if = "表达式"

v-show: 根据条件展示某元素，区别在于切换的是display属性的值
v-show="条件表达式"
-->

<div id="app">
    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <div v-show="count==3">div3</div>
    <hr>
    <input v-model="count">
</div>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                count:3
            }
        }
    })
</script>

</body>
</html>